<script lang="tsx">
  import { defineComponent, reactive } from 'vue'
  import { getSlot } from '@/utils/tsxHelper'
  import { Divider } from 'ant-design-vue'

  export default defineComponent({
    name: 'ModalHeader',
    props: {
      title: {
        type: String,
        default: ''
      }
    },
    emits: ['clickLeft'],
    setup(props, { slots, emit }) {
      const state = reactive({
        title: props.title
      })

      function clickLeft() {
        emit('clickLeft', 'clickLeft')
      }

      const renderLeft = () => (
        <div onClick={clickLeft} class="left">
          {state.title || getSlot(slots, 'left')}
        </div>
      )
      const renderMiddle = () => <div>{getSlot(slots, 'middle')}</div>
      const renderRight = () => <div>{getSlot(slots, 'right')}</div>

      return () => (
        <div class="wrap">
          <div class="content">
            {renderLeft()}
            {renderMiddle()}
            {renderRight()}
          </div>
          <Divider />
        </div>
      )
    }
  })
</script>

<style lang="scss" scoped>
  .wrap {
    .content {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        //padding-left: 5px;
        //border-left-color: #c50000;
        //border-left-style: solid;
        //border-left-width: 3px;
        height: 30px;
        font-size: 16px;
        font-weight: bold;
        line-height: 30px;
        color: #232323;
      }

      .left::before {
        position: absolute;
        top: 7px;
        left: -7px;
        width: 3px;
        height: 18px;
        background-color: #c50000;
        content: '';
      }
    }

    ::v-deep(.ant-divider.ant-divider-horizontal) {
      margin: 0;
    }
  }
</style>
